<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全图片查看器 - 密码保护</title>
    <!-- 引入OpenSeadragon库 -->
    <script src="js/openseadragon.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1600px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 密码输入界面 */
        .auth-container {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            text-align: center;
            transition: all 0.5s ease;
        }

        .auth-container.hidden {
            display: none;
        }

        .auth-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .auth-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 30px;
        }

        .password-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            text-align: left;
            gap: 8px;
        }

        label {
            font-weight: 500;
            font-size: 1.1rem;
        }

        input[type="password"] {
            padding: 15px;
            border-radius: 10px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.1rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        input[type="password"]:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .submit-btn {
            padding: 15px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(45deg, #fdbb2d, #b21f1f);
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            margin-top: 10px;
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .submit-btn:active {
            transform: translateY(1px);
        }

        .error-message {
            color: #ff4d4d;
            margin-top: 15px;
            font-weight: 500;
            min-height: 20px;
            visibility: hidden;
        }

        .error-message.visible {
            visibility: visible;
        }

        /* 图片查看界面 */
        .viewer-interface {
            width: 100%;
            display: none;
            flex-direction: column;
            gap: 20px;
        }

        .viewer-interface.active {
            display: flex;
        }

        header {
            text-align: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .viewer-container {
            width: 100%;
            height: 85vh;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        #viewer {
            width: 100%;
            height: 100%;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(45deg, #3498db, #2c3e50);
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .lock-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #fdbb2d;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .auth-container {
                padding: 30px 20px;
            }

            .auth-title {
                font-size: 2rem;
            }

            .viewer-container {
                height: 50vh;
            }
        }

    </style>
</head>
<body>
<div class="container">
    <!-- 密码输入界面 -->
    <div class="auth-container" id="authContainer">
        <i class="fas fa-lock lock-icon"></i>
        <h2 class="auth-title">图片查看器</h2>
        <p class="auth-subtitle">请输入密码查看图片内容</p>

        <div class="password-form">
            <div class="input-group">
                <label for="passwordInput">访问密码</label>
                <input type="password" id="passwordInput" placeholder="请输入访问密码">
            </div>

            <button type="button" class="submit-btn" id="submitPassword">
                <i class="fas fa-key"></i> 验证密码
            </button>

            <div class="error-message" id="errorMessage">
                密码错误，请重新输入
            </div>
        </div>
    </div>

    <!-- 图片查看界面 -->
    <div class="viewer-interface" id="viewerInterface">
        <header>
            <h2>图片查看器</h2>
        </header>

        <div class="viewer-container">
            <div id="viewer"></div>
        </div>

    </div>
</div>

<script>


    window.onload = function () {

        const previewPassword = getUrlParam(window.location.href, 'previewPassword');
        if (previewPassword) {
            handleClick(previewPassword);
        }
    }

    function getUrlParam(url, paramName) {
        let queryString = '';
        try {
            const urlObj = new URL(url);
            queryString = urlObj.search;
        } catch (e) {
            // 如果不是标准 URL，但以 ? 开头，当作查询字符串处理
            queryString = url.startsWith('?') ? url : '?' + url;
        }

        const searchParams = new URLSearchParams(queryString);
        return searchParams.get(paramName); // 存在则返回值，否则返回 null
    }

    // 使用：
    // const value = getUrlParam('https://xxx.com?user=alice&id=100', 'user');
    // console.log(value); // 'alice'

    // DOM元素
    const authContainer = document.getElementById('authContainer');
    const viewerInterface = document.getElementById('viewerInterface');
    const passwordInput = document.getElementById('passwordInput');
    const submitButton = document.getElementById('submitPassword');
    const errorMessage = document.getElementById('errorMessage');

    // 验证密码
    submitButton.addEventListener('click', () => handleClick());

    function handleClick(previewPassword) {
        let enteredPassword = passwordInput.value;
        if (previewPassword) {
            enteredPassword = previewPassword;
        }

        axios.post('/business/tiff/validPassword/' + enteredPassword)
            .then(function (response) {
                console.log(response);
                if (response.data.code == 200) {
                    // 密码正确，显示查看器
                    authContainer.classList.add('hidden');
                    viewerInterface.classList.add('active');
                    let previewUrl = response.data.previewUrl
                    initializeViewer(previewUrl);
                } else {
                    // 密码错误，显示错误信息
                    errorMessage.classList.add('visible');
                    passwordInput.value = '';

                    // 添加抖动动画效果
                    authContainer.style.animation = 'shake 0.5s';
                    setTimeout(() => {
                        authContainer.style.animation = '';
                    }, 500);
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }


    // 按Enter键提交
    passwordInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            submitButton.click();
        }
    });

    // 初始化OpenSeadragon查看器
    function initializeViewer(previewUrl) {
        const viewer = OpenSeadragon({
            id: "viewer",
            prefixUrl: "/images/",
            showNavigationControl: true,
            animationTime: 0.5,
            blendTime: 0.1,
            constrainDuringPan: true,
            maxZoomPixelRatio: 3,
            visibilityRatio: 1,
            zoomPerScroll: 1.5,
            // tileSources: "https://tiffbucket.oss-cn-beijing.aliyuncs.com/tif/my_dzi.dzi"
            tileSources: previewUrl
        });
    }

    // 添加CSS动画
    const style = document.createElement('style');
    style.textContent = `
            @keyframes shake {
                0% { transform: translateX(0); }
                20% { transform: translateX(-10px); }
                40% { transform: translateX(10px); }
                60% { transform: translateX(-10px); }
                80% { transform: translateX(10px); }
                100% { transform: translateX(0); }
            }
        `;
    document.head.appendChild(style);
</script>
</body>
</html>